<template>
  <div class="container">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px;
      "
    >
      <div style="display: flex; align-items: center" @click="toIndex()">
        <img src="../../assets/fitness/icon_back.png" alt="" style="" />
      </div>
      <div
        style="
          text-align: center;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        "
      >
        入场预约
      </div>
      <div></div>
    </div>
    <div class="date-list">
      <div
        :class="['date-list-item', index == dateActive ? 'active' : '']"
        @click="dateActive = index"
        v-for="(item, index) in dateList"
        :key="index"
      >
        <p>{{ item.text || item.desc }}</p>
        <p>{{ item.date }}</p>
      </div>
    </div>
    <div class="color-list" v-if="this.$route.params.type != 0">
      <div
        class="color-list-item"
        v-for="(item, index) in colorList"
        :key="index"
      >
        <span :class="['color-list-item-block', item.color]"></span
        >{{ item.name }}
      </div>
    </div>
    <div class="box-content" v-if="this.$route.params.type != 0">
      <div class="box-content-title" v-if="this.$route.params.type != 0">
        <div
          class="box-content-title-item"
          style="min-width: 52px"
          v-for="(item, index) in roomList"
          :key="index"
        >
          {{ item.VENUES }}
        </div>
      </div>

      <div
        class="box-content-line"
        v-for="(obj, indexKey) in tableData"
        :key="indexKey"
      >
        <div class="box-content-line-title" style="line-height: 18px">
          {{ indexKey }}
        </div>
        <div
          :class="[
            'box-content-line-item',
            item.status,
            checkedData[indexKey] && checkedData[indexKey].includes(index)
              ? 'green'
              : '',
          ]"
          v-for="(item, index) in obj"
          @click="changeData(index, indexKey, item)"
          :key="index"
        >
          {{ item.status == "while" ? item.price : "" }}
        </div>
      </div>
    </div>

    <div style="padding: 15px 15px 80px 15px">
      <div class="yuyue" style="font-size: 14px" v-if="this.$route.params.type !=='0'">
       
        <div class="title" style=" text-align: center">
          职工活动中心承诺书
        </div>
        1、进入活动中心应服从工作人员安排，凭预约码扫码核销后入馆。<br />
        2、节假日职工可带亲友（14周岁-60周岁）入馆活动，人员信息需由职工本人提前录入，现场扫码并签署电子承诺书后方可入馆。<br />
        3、羽毛球场、台球桌、乒乓球桌以专项预约者优先使用。<br />
        4、活动中心电子屏幕、音响等设施由指定专人管理，严禁随意操作。<br />
        5、活动中心内严禁吸烟。严禁带入易燃、易爆、易腐物品，易洒食品和含酒精饮料。不得在运动区域内饮食。<br />
        6、活动中心内要举止文明，爱护公共设施，维护场地整洁，注意用电安全，体育器材使用后按原位摆放整齐，严禁借出或带走。<br />
        7、禁止在墙面、器材等物品上面随便刻画、涂写，严禁用球向墙面、门窗撞击。故意损坏活动中心内设施设备的，需照价赔偿。<br />
        8、严禁一切机动车辆、非机动车辆、平衡车、滑板车等进入活动中心。<br />
        9、进入活动中心必须穿软底鞋，并且保持鞋底清洁，不准穿皮鞋、高跟鞋等硬底鞋进入场馆。下雨天雨具应集中存放在指定位置不得带入活动中心。<br />
        10、职工应对自身及亲友的安全负责，预防跌落、砸伤、触电等各类安全事故的发生，运动前应做好热身运动，避免发生运动损伤。一旦发生，责任自行承担。<br />
        11、个人财产自行妥善保管。若有财物损失，场馆概不负责。<br />
        12、未尽事宜参照《职工活动中心管理办法》执行。
        <div style="padding: 15px 0; font-size: 14px">
          <van-checkbox v-model="checkeds">我已阅读并同意以上内容</van-checkbox>
        </div>
      </div>
      <div class="yuyue" style="max-height:350px" v-else>
       
        <div class="title" style=" text-align: center">
          职工活动中心承诺书
        </div>
        1、进入活动中心应服从工作人员安排，凭预约码扫码核销后入馆。<br />
        2、节假日职工可带亲友（14周岁-60周岁）入馆活动，人员信息需由职工本人提前录入，现场扫码并签署电子承诺书后方可入馆。<br />
        3、羽毛球场、台球桌、乒乓球桌以专项预约者优先使用。<br />
        4、活动中心电子屏幕、音响等设施由指定专人管理，严禁随意操作。<br />
        5、活动中心内严禁吸烟。严禁带入易燃、易爆、易腐物品，易洒食品和含酒精饮料。不得在运动区域内饮食。<br />
        6、活动中心内要举止文明，爱护公共设施，维护场地整洁，注意用电安全，体育器材使用后按原位摆放整齐，严禁借出或带走。<br />
        7、禁止在墙面、器材等物品上面随便刻画、涂写，严禁用球向墙面、门窗撞击。故意损坏活动中心内设施设备的，需照价赔偿。<br />
        8、严禁一切机动车辆、非机动车辆、平衡车、滑板车等进入活动中心。<br />
        9、进入活动中心必须穿软底鞋，并且保持鞋底清洁，不准穿皮鞋、高跟鞋等硬底鞋进入场馆。下雨天雨具应集中存放在指定位置不得带入活动中心。<br />
        10、职工应对自身及亲友的安全负责，预防跌落、砸伤、触电等各类安全事故的发生，运动前应做好热身运动，避免发生运动损伤。一旦发生，责任自行承担。<br />
        11、个人财产自行妥善保管。若有财物损失，场馆概不负责。<br />
        12、未尽事宜参照《职工活动中心管理办法》执行。
        <div style="padding: 15px 0; font-size: 14px">
          <van-checkbox v-model="checkeds">我已阅读并同意以上内容</van-checkbox>
        </div>
      </div>
     
    </div>
    <div class="btn-list">
      <div class="btn-list-item family-btn" @click="getPeople" v-if="showpeople">
        <img style="    vertical-align: middle;" src="../../assets/fitness/icon_qinyou.png" alt="" />
      同行亲友
      </div>
      <div class="btn-list-item reserve-btn" @click="submit">  <img style="    vertical-align: middle;" src="../../assets/fitness/icon_yuyue.png" alt="" />立即预约</div>
    </div>
  </div>
</template>
<script>
import { getCarous } from "../../api/index";
export default {
  data() {
    return {
      dayOfWeek: null,
      showpeople: true,
      checkeds: false, // 初始化为未选择
      checked: false,
      selectedItems: [],
      resultData: [],
      couponList: ["满80减6", "满50减4", "满30减2"],
      dateList: [],
      dateActive: 0,
      currentDateType: null,
      roomList: [
        "空调VIP1号场",
        "空调VIP2号场",
        "空调VIP3号场",
        "空调VIP4号场",
        "空调单打5号场",
      ], // 房间list
      tableData: {},
      colorList: [
        { color: "while", name: "可预约" },
        { color: "orange", name: "已预约" },
        { color: "gray", name: "已占用" },
        { color: "green", name: "选中" },
      ],
      checkedData: {}, //选中的数据
    };
  },
  watch: {
    dateActive(val) {
      console.log(val, "val");
      const selectedDate = this.dateList[val];
      console.log(selectedDate, "selectedDate");
      const isWeekend =
        selectedDate.desc.includes("周六") ||
        selectedDate.desc.includes("周日");
      const currentDate = selectedDate.date;
      const [month, day] = currentDate.split("-");
      const year = new Date().getFullYear();
      this.dateNow = `${year}-${month}-${day}`;
      this.dataList();

      if (isWeekend) {
        this.dayOfWeek = 0;
        // 如果是周末
        // 进行相应的数据处理
      } else {
        this.dayOfWeek = 1;
        // 如果不是周末
        // 进行相应的数据处理
      }
      this.checkedData = {};
      this.falseData();
    },
  },
  created() {
    this.initList();
  },
  beforeMount() {
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(today.getDate());
    const year = tomorrow.getFullYear();
    const month = String(tomorrow.getMonth() + 1).padStart(2, "0");
    const date = String(tomorrow.getDate()).padStart(2, "0");
    this.dateNow = `${year}-${month}-${date}`;
    this.dayOfWeek = new Date().getDay();
    this.dataList();
  },
  mounted() {
    // 格式化日期
    Date.prototype.format = function (format) {
      var o = {
        "M+": this.getMonth() + 1, //month
        "d+": this.getDate(), //day
        "h+": this.getHours(), //hour
        "m+": this.getMinutes(), //minute
        "s+": this.getSeconds(), //second
        "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
        S: this.getMilliseconds(), //millisecond
      };
      if (/(y+)/.test(format)) {
        format = format.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return format;
    };

    let { type } = this.$route.params;
    let selectedItems = [];

    if (this.$route.query.selectedItems) {
      const parsedItems = JSON.parse(this.$route.query.selectedItems);
      if (Array.isArray(parsedItems)) {
        selectedItems = parsedItems;
      }
    }

    this.selectedItems = selectedItems;

    if (![undefined, null].includes(Number(type))) {
      type -= 0;
      // 根据跳转进来的数据判断是是否生成多条数据
      if (type == 0) {
        this.dateList = [this.getSpecificDate(0)];
      } else if (type > 0) {
        let arr = [];
        for (let i = 0; i <= 2; i++) {
          arr.push(this.getSpecificDate(i));
        }
        this.dateList = arr;
      }
    }
  },
  methods: {
    toIndex() {
      this.$router.replace({
        name: "index",
      });
    },
    //获取我的预约
    getMyDetail() {
      var param = {
        orderDate: this.dateNow,

        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_my_order_venues",
        dduserid: window.dduserid,
      };
      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          console.log(res, "res");

          let array = data.resultData;

          for (let i = 0; i < array.length; i++) {
            const { VENUESID, ORDER_TIME } = array[i];

            // 找到对应的场地列
            const column = this.roomList.findIndex(
              (item) => item.VENUESID === VENUESID
            );
            if (column !== -1) {
              // 找到对应的时间行
              const timeKeys = Object.keys(this.tableData);
              for (let j = 0; j < timeKeys.length; j++) {
                const timeKey = timeKeys[j];
                if (timeKey === ORDER_TIME) {
                  // 找到对应的单元格数组，并修改状态为选中
                  const cells = this.tableData[timeKey];
                  for (let k = 0; k < cells.length; k++) {
                    const cell = cells[k];
                    if (k === column) {
                      cell.status = "orange";
                      this.$forceUpdate();
                    }
                  }
                  break;
                }
              }
            }
          }
        } else {
          // this.finished = true;
        }
      });
    },
    //选择陪同人员
    getPeople() {
      let { type } = this.$route.params;
      this.$router.push({ path: `/people/${type}` });
    },
    //按照日期去查询对应的选中信息

    dataList() {
      var param = {
        orderDate: this.dateNow,

        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_order_venues",
      };
      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          this.resultData = data.resultData;

          for (let i = 0; i < this.resultData.length; i++) {
            const { VENUESID, ORDER_TIME } = this.resultData[i];

            // 找到对应的场地列
            const column = this.roomList.findIndex(
              (item) => item.VENUESID === VENUESID
            );
            if (column !== -1) {
              // 找到对应的时间行
              const timeKeys = Object.keys(this.tableData);
              for (let j = 0; j < timeKeys.length; j++) {
                const timeKey = timeKeys[j];
                if (timeKey === ORDER_TIME) {
                  // 找到对应的单元格数组，并修改状态为选中
                  const cells = this.tableData[timeKey];
                  for (let k = 0; k < cells.length; k++) {
                    const cell = cells[k];
                    if (k === column) {
                      cell.status = "gray";
                      this.$forceUpdate();
                    }
                  }
                  break;
                }
              }
            }
          }
          this.getMyDetail();
        } else {
          // this.finished = true;
        }
      });
    },
    //获取场馆数据
    initList() {
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_base_venues",
      };
      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          this.roomList = data.resultData;
          this.falseData();
        } else {
          // this.finished = true;
        }
      });
    },
    // 计算日期和周期数
    getSpecificDate(day) {
      console.log(day);
      var dayNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      //计算出要加/减的毫秒数
      var num = 1000 * 60 * 60 * 24 * day;
      var newDate = new Date(Date.now() + num);
      let params = {
        date: newDate.format("MM-dd"),
        desc: dayNames[newDate.getDay()],
      };
      if (day == 0 || day == 1) {
        params.text = day == 0 ? "今天" : "";
      }
      return params;
    },
    // 伪造数据
    falseData() {
      const { roomList } = this;
      let obj = {};
      const { type } = this.$route.params;
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_orderdate_type",
        orderDate: this.dateNow,
      };
      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          console.log(res, "res55555555");
          this.currentDateType = res.data.isWorkday;
          console.log(this.currentDateType, "this.currentDateType");
          if (type == 0) {
            // this.showpeople=false;
            if (this.currentDateType == 0) {
              // 周末时间段
              for (let i = 8; i <= 20; i++) {
                obj[`${i < 10 ? "0" + i : i}:00`] = roomList.map((s) => {
                  return {
                    status: "while",
                    price: "",
                  };
                });
              }
            } else {
              this.showpeople = false;
              // 工作日时间段
              for (let i = 16; i <= 19; i++) {
                obj[`${i < 10 ? "0" + i : i}:45`] = roomList.map((s) => {
                  return {
                    status: "while",
                    price: "",
                  };
                });
              }
            }
            this.tableData = obj;
          } else {
            if (this.currentDateType == 0) {
              // 周末时间段
              for (let i = 8; i <= 20; i += 2) {
                obj[`${i < 10 ? "0" + i : i}:00`] = roomList.map((s) => {
                  return {
                    status: "while",
                    price: "",
                  };
                });
              }
            } else {
              this.showpeople = false;
              // 工作日时间段
              console.log(this.roomList, " this.roomList");
              for (let i = 16; i <= 19; i++) {
                obj[`${i < 10 ? "0" + i : i}:45`] = roomList.map((s) => {
                  return {
                    status: "while",
                    price: "",
                  };
                });
              }
            }

            this.tableData = obj;
            this.dataList();
          }
        } else {
          // this.finished = true;
        }
      });
    },
    changeData(index, key, item) {
      const VENUESID = this.roomList[index].VENUESID;

      const { status } = item;
      const { checkedData } = this;

      if (this.$route.params.type == 0 || status != "while") {
        // 如果当前选择的格子不可选，则取消其选中状态
        this.roomList[index].STATUS = "white";
        return;
      }

      // 取消已选中的时间段的状态
      if (Object.keys(checkedData).length > 0) {
        const checkedKey = Object.keys(checkedData)[0];
        const checkedIndex = checkedData[checkedKey][1];
        this.roomList[checkedIndex].STATUS = "white";
        delete checkedData[checkedKey];
      }

      if (key in checkedData) {
        if (checkedData[key][1] === index) {
          // 如果当前格子已经选中，则取消其选中状态
          delete checkedData[key];
          this.roomList[index].STATUS = "white";
          this.$forceUpdate();
        } else {
          // 如果当前格子未选中，则将当前格子设置为选中状态
          checkedData[key] = [VENUESID, index];
          this.roomList[index].STATUS = "while";
          this.$forceUpdate();
        }
      } else {
        // 如果当前没有时间段被选中，则直接将当前格子设置为选中状态
        checkedData[key] = [VENUESID, index];
        this.roomList[index].STATUS = "while";
        this.$forceUpdate();
      }
    },

    checkSource(key) {
      const { checkedData, dateList, dateActive } = this;
      let isBuss = ["周六", "周日"].includes(dateList[dateActive].desc);
      let keys = Object.keys(checkedData);

      if (keys.length === 1) {
        if (isBuss) {
          let newKey = parseInt(key);
          let nowKey = parseInt(keys[0]);
          if (![nowKey + 1, nowKey - 1].includes(newKey)) {
            this.$toast({
              message: "当天您已预约时间段，不可再次预约",
            });
            return false;
          }
        } else {
          this.$toast({
            message: "当天您已预约时间段，不可再次预约",
          });
          return false;
        }
      } else if (keys.length === 2) {
        this.$toast({
          message: "当天您已预约时间段，不可再次预约",
        });
        return false;
      }

      return true;
    },
    //预约提交
    submit() {
      console.log(this.checkeds, "asdasdas");
      if (this.checkeds == false) {
        this.$toast({
          message: "请先同意承诺书",
        });
      } else {
        const { type } = this.$route.params;
        //入场预约提交
        if (type == 0) {
          const today = new Date();
          const year = today.getFullYear();
          const month = String(today.getMonth() + 1).padStart(2, "0");
          const day = String(today.getDate()).padStart(2, "0");
          const defaultOrderDate = `${year}-${month}-${day}`;
          //周末时间段
          if (this.currentDateType == 0) {
            var param = {
              cmd: "com.awspaas.user.apps.sfeg.tu.honor.start_venue_special_order",
              dduserid: window.dduserid,
              orderType: "2",
              venuesid: "",
              orderDate: defaultOrderDate,
              orderTime: "08:00-20:00",
              escort1: JSON.stringify(this.selectedItems),
            };

            getCarous(param).then((res) => {
              const { result, msg, data, id } = res;

              if (result === "ok") {
                if (data.result == "success") {
                  var param1 = {
                    cmd: "com.awspaas.user.apps.sfeg.tu.honor.validate_venue_special_order",
                    dduserid: window.dduserid,
                    orderType: "2",
                    venuesid: "",
                    orderDate: defaultOrderDate,
                    orderTime: "08:00-20:00",
                    escort1: JSON.stringify(this.selectedItems),
                  };

                  getCarous(param1).then((res) => {
                    const { result, msg, data, id } = res;

                    if (result === "ok") {
                      this.$toast.success({
                        message: data.msg,
                      });
                      this.getMyDetail();
                    } else {
                      // this.finished = true;
                    }
                  });
                } else {
                  this.$toast({
                    message: data.msg,
                  });
                }
                // this.$toast.success({
                //   message: data.msg,
                // });
                // this.getMyDetail();
              } else {
                // this.finished = true;
              }
            });
          } else {
            //工作日时间段
            var param = {
              cmd: "com.awspaas.user.apps.sfeg.tu.honor.validate_venue_special_order",
              dduserid: window.dduserid,
              orderType: "0",
              venuesid: "",
              orderDate: defaultOrderDate,
              orderTime: "16:45-19:45",
              escort1: JSON.stringify(this.selectedItems),
            };

            getCarous(param).then((res) => {
              const { result, msg, data, id } = res;

              if (result === "ok") {
                if (data.result == "success") {
                  var param1 = {
                    cmd: "com.awspaas.user.apps.sfeg.tu.honor.start_venue_special_order",
                    dduserid: window.dduserid,
                    orderType: "0",
                    venuesid: "",
                    orderDate: defaultOrderDate,
                    orderTime: "16:45-19:45",
                    escort1: JSON.stringify(this.selectedItems),
                  };

                  getCarous(param1).then((res) => {
                    const { result, msg, data, id } = res;

                    if (result === "ok") {
                      this.$toast.success({
                        message: data.msg,
                      });
                      this.getMyDetail();
                    } else {
                      // this.finished = true;
                    }
                  });
                } else {
                  this.$toast({
                    message: data.msg,
                  });
                }
                // this.$toast.success({
                //   message: data.msg,
                // });
                // this.getMyDetail();
              } else {
                // this.finished = true;
              }
            });
          }
        } else {
          //专项预约
          if (this.currentDateType == "0") {
            const orderTime = Object.keys(this.checkedData);
            const startTime = orderTime[0];
            const startHour = parseInt(startTime.substring(0, 2));
            const startMinute = parseInt(startTime.substring(3, 5));
            const endHour = (startHour + 2) % 24;
            const endMinute = startMinute;
            const endTime = `${endHour.toString().padStart(2, "0")}:${endMinute
              .toString()
              .padStart(2, "0")}`;
            const formattedTime = `${startTime}-${endTime}`;
            const firstValue = this.checkedData[orderTime[0]];
            console.log(formattedTime, "formattedTime");
            var param = {
              cmd: "com.awspaas.user.apps.sfeg.tu.honor.validate_venue_special_order",
              dduserid: window.dduserid,
              orderType: "3",
              venuesid: firstValue[0],
              orderDate: this.dateNow,
              orderTime: formattedTime,
              escort1: JSON.stringify(this.selectedItems),
            };

            getCarous(param).then((res) => {
              const { result, msg, data, id } = res;

              if (result === "ok") {
                if (data.result == "success") {
                  var param1 = {
                    cmd: "com.awspaas.user.apps.sfeg.tu.honor.start_venue_special_order",
                    dduserid: window.dduserid,
                    orderType: "3",
                    venuesid: firstValue[0],
                    orderDate: this.dateNow,
                    orderTime: formattedTime,
                    escort1: JSON.stringify(this.selectedItems),
                  };

                  getCarous(param1).then((res) => {
                    const { result, msg, data, id } = res;

                    if (result === "ok") {
                      this.$toast.success({
                        message: data.msg,
                      });
                      this.getMyDetail();
                    } else {
                      // this.finished = true;
                    }
                  });
                } else {
                  this.$toast({
                    message: data.msg,
                  });
                }
              } else {
                // this.finished = true;
              }
            });
          } else {
            const orderTime = Object.keys(this.checkedData);
            // console.log(orderTime,'orderTime')
            const startTime = orderTime[0];
            const [hour, minute] = startTime.split(":");
            const nextHour = String(Number(hour) + 1).padStart(2, "0");
            const endTime = `${nextHour}:${minute}`;
            const formattedTime = `${startTime}-${endTime}`;
            const firstValue = this.checkedData[startTime];

            var param = {
              cmd: "com.awspaas.user.apps.sfeg.tu.honor.validate_venue_special_order",
              dduserid: window.dduserid,
              orderType: "1",
              venuesid: firstValue[0],
              orderDate: this.dateNow,
              orderTime: formattedTime,
              escort1: JSON.stringify(this.selectedItems),
            };

            getCarous(param).then((res) => {
              const { result, msg, data, id } = res;

              if (result === "ok") {
                if (data.result == "success") {
                  var param = {
                    cmd: "com.awspaas.user.apps.sfeg.tu.honor.start_venue_special_order",
                    dduserid: window.dduserid,
                    orderType: "1",
                    venuesid: firstValue[0],
                    orderDate: this.dateNow,
                    orderTime: formattedTime,
                    escort1: JSON.stringify(this.selectedItems),
                  };

                  getCarous(param).then((res) => {
                    const { result, msg, data, id } = res;

                    if (result === "ok") {
                      this.$toast.success({
                        message: data.msg,
                      });
                      console.log("888888888888888");
                      this.getMyDetail();
                      // this.falseData();
                    } else {
                      // this.finished = true;
                    }
                  });
                } else {
                  this.$toast({
                    message: data.msg,
                  });
                }
              } else {
                // this.finished = true;
              }
            });
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box-content-line:last-child .box-content-line-item.while {
  display: none;
}

.container {
  width: 100vw;
  background: #f8fafa;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;

  .coupon {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    box-sizing: border-box;
    overflow-x: auto;

    &-item {
      padding: 5px 10px;
      border: 1px solid red;
      border-radius: 4px;
      font-size: 14px;
      color: red;

      &:not(:last-child) {
        margin-right: 10px;
      }
    }
  }

  .date-list {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    margin-left: 20px;
    box-sizing: border-box;
    overflow-x: auto;

    &-item {
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      background: #eeeeee;
      border-radius: 4px 4px 4px 4px;
      padding: 4px 18px;

      &.active {
        color: #0256ff;
        background: rgba(2, 86, 255, 0.1);
      }

      &:not(:last-child) {
        margin-right: 10px;
      }

      > p {
        margin: 0;
      }
    }
  }

  .color-list {
    width: 100%;
    height: 40px;
    display: flex;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    // border-top: 1px solid #999;

    &-item {
      margin-right: 10px;
      font-size: 12px;

      &-block {
        display: inline-block;
        width: 20px;
        height: 10px;
        margin-right: 5px;
      }
    }
  }

  .btn-list {
    width: 100%;
    height: 80px;
    border-top: 1px solid #999;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    bottom: 15px;

    &-item {
      width: 100%;
      height: 50px;
   
      border-radius: 10px;
      text-align: center;
      line-height: 45px;
      font-size: 16px;
      color: #ffffff;
    }
  }
  .family-btn {
    background-image: url("../../assets/fitness/btn_family_add.png");
    background-size: cover; /* 将背景图像缩放以填充整个按钮 */
    background-position: center center; 
  }
  
  .reserve-btn {
    background-image: url("../../assets/fitness/btn_yuyue_now.png");
    background-size: cover; /* 将背景图像缩放以填充整个按钮 */
    background-position: center center; 
  }
  .box-content-line-title {
    position: sticky;
    left: 0px;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    z-index: 999;
  }

  .box-content {
    flex: 1;
    min-height: 200px;
    max-height: 260px;
    width: 100%;
    overflow-x: auto;
   

    &-title {
      padding-left: 60px;
      box-sizing: border-box;
      display: flex;
      padding-top: 10px;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 15px;
      color: #333333;

      &-item {
        width: 52px;
        font-size: 15px;
        border: none;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        text-align: center;

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }

    &-line {
      margin-top: 10px;
      display: flex;

      &-title {
        width: 50px;
        min-width: 50px;
        margin-right: 10px;
        font-size: 14px;
        text-align: center;
      }

      &-item {
        font-size: 14px;
        width: 52px;
        min-width: 52px;
        text-align: center;
        margin-right: 6px;
        height: 32px;
        line-height: 32px;

        &.while {
          color: rgb(19, 193, 247);
          border: 1px solid;
        }

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }

  .while {
    background: #fff;
 
    border-radius: 2px;
    border: 1px solid;
  }

  .yellow {
    background: orange;
    border-radius: 2px;
    border: 1px solid;
  
  }

  .gray {
    background: #dddddd;
    border-radius: 2px;
    border: 1px solid #dddddd;

  }

  .green {
    background: #fb8524;
    border-radius: 2px;
    border: 1px solid #fb8524;

    background-image: url("../../assets/fitness/btn_tick.png");
    background-size: cover;
    background-repeat: no-repeat; /* 确保背景图不重复 */
  }
  .orange {
    border: 1px solid #62c980;
    background: #62c980;
    border-radius: 2px;
 
    background-image: url("../../assets/fitness/btn_family.png");
    background-size: cover;
    background-repeat: no-repeat; /* 确保背景图不重复 */
    
  }
}
.yuyue{
  font-size: 14px;
  background: #FFFFFF;
  margin-top: 18px;
  padding: 20 20px;
  padding: 20px;
  max-height: 200px;
  overflow-y: auto;
  .title{
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    margin-bottom: 12px;
  }
}
</style>